js 手写轮播列表

您所在的位置：网站首页 › js 列表循环滑动 › js 手写轮播列表

js 手写轮播列表

2023-12-27 06:42| 来源: 网络整理| 查看: 265

最近某个项目中要求的该奇葩的需求，要求列表轮播且鼠标移入暂停轮播且可以手动滚动列表，鼠标移出继续轮播

网上很多插件都满足了基本的轮播需求：轮播，鼠标移入暂停轮播，鼠标移出继续轮播，唯独这个需求没有满足，就是鼠标移入时，还可以手动滚动列表，于是我决定手写一个，

轮播实现的方式有很多种，可以用 transform、top来写，但为了这个特殊的需求，只有用scrollTop来实现了

html部分

// 外层容器 // 内容 {{item}}

css部分

.swiper-wrapper { width: 600px; height: 1000px; border: solid 1px red; // 默认是隐藏超出 overflow: hidden; // 鼠标移入可滚动列表 &:hover { overflow-y: scroll; } &::-webkit-scrollbar { width: 10px; height: 1px; display: none; } // 滚动条上的滚动滑块 &::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; } // 滚动条背景轨道 &::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: #ededed; } // 内容超出展示 .content-container { overflow: visible; height: 100%; width: 100%; border: solid 1px red; transition: all 0.5s linear; .item-style { width: 100%; height: 100px; line-height: 40px; color: white; border: solid 1px red; } } }

js部分

export default { data() { return { // 定时器 timer: null, // 循环的数据 dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21], // 展示内容的高度 config: { height: null, }, // 轮训的时间 dvtime: 10, }; }, mounted() { // 获取dom内容的高度 this.initInfo(); // 调用定时器 this.initTimerInterval(); }, methods: { initInfo() { this.config.height = this.$refs.itemRef.clientHeight * this.dataList.length; }, initTimerInterval() { this.clearEvent(); this.timer = setInterval(() => { window.requestAnimationFrame(this.scroll); }, this.dvtime); }, scroll: function() { const that = this; const DOM = this.$refs.outterRef; // 如果滚动到头则重新滚动 if (DOM.scrollTop > (this.config.height - this.$refs.outterRef.clientHeight)) { DOM.scrollTop = 0; setTimeout(() => { window.requestAnimationFrame(that.scroll); }, that.dvtime); return; } DOM.scrollTop++; }, clearEvent() { if (this.timer) { clearInterval(this.timer); this.timer = null; } }, // 鼠标移入关闭定时器 mouseenterEvent() { this.clearEvent(); }, // 鼠标移出重新调用定时器 mouseleaveEvent() { this.initTimerInterval(); }, }, beforeUnmount() { this.clearEvent(); }, };

【本文地址】

js 手写轮播列表

js 手写轮播列表

今日新闻

推荐新闻